<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../css/all-use.css"/>
    <link rel="stylesheet" type="text/css" href="../css/bs.css"/>
    <script src="../js/jquery-3.6.0.slim.min.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/bootstrap.js"></script>
    <title></title>
</head>
<body class="all-background">
<div>
    <div class="pos-fixed">
        <div class="fixed-set">
            填写预约详情
        </div>
    </div>
    <div class="out-top">
    </div>
    <!-- 主体-->
    <div class="container" style="padding-top: 20px">
        <!-- 以下为表单信息 -->
        <div class="left1">
            <div>
                <form>
                    <div class="form-row">
                        <div>
                            <label class="form-bottom">真实姓名:</label>
                            <input type="text" class="form-control form-bottom input-sty" id="real_name">
                        </div>
                        <div>
                            <label class="form-bottom">联系电话:</label>
                            <input type="text" class="form-control form-bottom input-sty" id="contact">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-bottom">日期:</label>
                        <select id="Date" onselect="state2_dateChanger(null)" class="form-control form-bottom input-sty">
                            <option selected>2月24日</option>
                            <option>2月25日</option>
                        </select>
                        <label class="form-bottom">预约时间:</label>
                        <label class="form-bottom" id="Time">
                            19:00-20:00
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="form-bottom">会议室用途:</label>
                        <input type="text" class="form-control form-bottom input-sty" id="purpose">
                    </div>
                    <div class="form-group">
                        <label class="form-bottom">参与人数:</label>
                        <input type="text" class="form-control form-bottom input-sty" id="participants">
                    </div>
                    <div class="form-group">
                        <label class="form-bottom">申请人备注：</label>
                        <div class="div-text">
                            <textarea id="comment" rows="5" cols="20" class="textarea1 input-sty"></textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- 以下为时间表 -->
        <div class="right1">
            <table class="table-sty">
                <thead>
                <tr>
                    <th id="date_0">2月20日</th>
                </tr>
                </thead>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_0">8:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_1">9:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_2">10:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_3">11:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_4">12:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_5">13:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_6">14:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_7">15:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_8">16:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_9">17:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_10">18:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_11">19:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_12">20:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_13">21:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_14">22:00</button></td>
                </tr>
                <tr>
                    <td><button class="table-btn-noselect" id="date_0_15">23:00</button></td>
                </tr>
            </table>
        </div>
    </div>
    <!--按钮部分-->

    <div>
        <div class="nav-next-back">
            <div>
                <button class="button-back btn-primary button-shadow" id="previous-step">
                    上一步
                </button>
            </div>
            <div>
                <button class="button-next btn-primary button-shadow" id="next-step">
                    提交
                </button>
            </div>
        </div>
    </div>
    <div class="out-bottom-sp">
    </div>
    <!--按钮部分-->
    <!-- 下面为导航栏部分 -->
    <div id="mynav">
        <ul class="nav nav-pills nav-fill">
            <li class="nav-item nav-width">
                <button class="nav-link nav-height active" onclick="jumpToBook()">预约会议室</button>
            </li>
            <li class="nav-item nav-width">
                <button class="nav-link  nav-height" onclick="jumpToSearch()">查看占用</button>
            </li>
            <li class="nav-item nav-width">
                <button class="nav-link nav-height">个人中心</button>
            </li>
        </ul>
    </div>
    <!-- 以上导航栏部分 -->
</div>
</body>
</html>











